extends ../_layout

block active
  - sidebar_active = 'table-extended.html'

block content
  h3 Tables
    small A showcase of different components inside tables

  // START panel
  .panel.panel-default
    .panel-heading
      | Demo Table #1
    // START table-responsive
    .table-responsive
      table#table-ext-1.table.table-bordered.table-hover
        thead
          tr
            th UID
            th Picture
            th Username
            th First Name
            th Last Name
            th Email
            th Profile
            th Last Login
            th(data-check-all)
              .checkbox.c-checkbox(data-toggle="tooltip", data-title="Check All")
                label
                  input(type='checkbox')
                  span.fa.fa-check
        tbody
          tr
            td 1
            td
              .media
                img.img-responsive.img-circle(src="img/user/01.jpg", alt="Image")
            td @twitter
            td Larry
            td the Bird
            td mail@example.com
            td.text-center
              .radial-bar.radial-bar-25.radial-bar-xs(data-label="25%")
            td 1 week
            td
              .checkbox.c-checkbox
                label
                  input(type='checkbox')
                  span.fa.fa-check
          tr
            td 2
            td
              .media
                img.img-responsive.img-circle(src="img/user/02.jpg", alt="Image")
            td @mdo
            td Mark
            td Otto
            td mail@example.com
            td.text-center
              .radial-bar.radial-bar-50.radial-bar-xs(data-label="50%")
            td 25 minutes
            td
              .checkbox.c-checkbox
                label
                  input(type='checkbox')
                  span.fa.fa-check
          tr
            td 3
            td
              .media
                img.img-responsive.img-circle(src="img/user/03.jpg", alt="Image")
            td @fat
            td Jacob
            td Thornton
            td mail@example.com
            td.text-center
              .radial-bar.radial-bar-80.radial-bar-xs(data-label="80%")
            td 10 hours
            td
              .checkbox.c-checkbox
                label
                  input(type='checkbox')
                  span.fa.fa-check
    // END table-responsive
    .panel-footer
      .row
        .col-lg-2
          .input-group
            input.input-sm.form-control(type='text', placeholder='Search')
            span.input-group-btn
              button.btn.btn-sm.btn-default(type='button') Search
        .col-lg-8
        .col-lg-2
          .input-group.pull-right
            select.input-sm.form-control
              option(value='0') Bulk action
              option(value='1') Delete
              option(value='2') Clone
              option(value='3') Export
            span.input-group-btn
              button.btn.btn-sm.btn-default Apply
  // END panel

  // START panel
  .panel.panel-default
    .panel-heading
      | Demo Table #2
    // START table-responsive
    .table-responsive
      table#table-ext-2.table.table-striped.table-bordered.table-hover
        thead
          tr
            th(data-check-all)
              .checkbox.c-checkbox(data-toggle="tooltip", data-title="Check All")
                label
                  input(type='checkbox')
                  span.fa.fa-check
            th Description
            th Active
        tbody
          tr
            td
              .checkbox.c-checkbox
                label
                  input(type='checkbox')
                  span.fa.fa-check
            td
              .media
                  a.pull-left(href='#')
                    img.media-object.img-responsive.img-circle(src="img/user/01.jpg",alt="")
                  .media-body
                    .pull-right.badge.baed-info admin
                    h4.media-heading Holly Wallace
                    p Username: holly123
                    | Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
            td.text-center
              label.switch
                input(type='checkbox')
                span
          tr
            td
              .checkbox.c-checkbox
                label
                  input(type='checkbox')
                  span.fa.fa-check
            td
              .media
                  a.pull-left(href='#')
                    img.media-object.img-responsive.img-circle(src="img/user/03.jpg",alt="")
                  .media-body
                    .pull-right.badge.baed-info writer
                    h4.media-heading Alexis Foster
                    p Username: ali89
                    | Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
            td.text-center
              label.switch
                input(type='checkbox', checked)
                span
          tr
            td
              .checkbox.c-checkbox
                label
                  input(type='checkbox')
                  span.fa.fa-check
            td
              .media
                  a.pull-left(href='#')
                    img.media-object.img-responsive.img-circle(src="img/user/05.jpg",alt="")
                  .media-body
                    .pull-right.badge.baed-info editor
                    h4.media-heading Mario Miles
                    p Username: mariomiles
                    | Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
            td.text-center
              label.switch
                input(type='checkbox', checked)
                span
    // END table-responsive
    .panel-footer
      .row
        .col-lg-2
          .input-group.pull-right
            select.input-sm.form-control
              option(value='0') Bulk action
              option(value='1') Delete
              option(value='2') Clone
              option(value='3') Export
            span.input-group-btn
              button.btn.btn-sm.btn-default Apply
        .col-lg-8
        .col-lg-2.text-right
          ul.pagination.pagination-sm
            li.active: a(href='#') 1
            li: a(href='#') 2
            li: a(href='#') 3
            li: a(href='#') »
  // END panel

  // START row
  .row
    .col-lg-6
      // START panel
      .panel.panel-default
        .panel-heading
          | Demo Table #3
          // START table-responsive
          .table-responsive
            table#table-ext-3.table.table-striped.table-bordered.table-hover
              thead
                tr
                  th Task name
                  th Progress
                  th Deadline
              tbody
                tr
                  td Nunc luctus, quam non condimentum ornare
                  td 
                    .progress.progress-striped.progress-xs
                        .progress-bar.progress-bar-success.progress-80(role='progressbar', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100')
                          span.sr-only 80% Complete
                  td 05/05/2014
                tr
                  td Integer in convallis felis.
                  td 
                    .progress.progress-striped.progress-xs
                        .progress-bar.progress-bar-danger.progress-20(role='progressbar', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100')
                          span.sr-only 20% Complete
                  td 15/05/2014
                tr
                  td Nullam sit amet magna vestibulum libero dapibus iaculis. 
                  td 
                    .progress.progress-striped.progress-xs
                        .progress-bar.progress-bar-info.progress-50(role='progressbar', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
                          span.sr-only 50% Complete
                  td 05/10/2014

          // END table-responsive
      // END panel
    .col-lg-6
      // START panel
      .panel.panel-default
        .panel-heading
          | Demo Table #4
        // START table-responsive
        .table-responsive
          table.table.table-striped.table-bordered.table-hover
            thead
              tr
                th Project
                th Activity
                th Completion
            tbody
              tr
                td Bootstrap 5.x
                td 
                  div(data-sparkline="", data-bar-color="#5d9cec", data-height="20", data-bar-width="5", data-bar-spacing="2", data-values="1,4,4,7,5,9,10", data-resize="true")
                td 
                  .label.label-danger Canceled
              tr
                td Web Engine
                td 
                  div(data-sparkline="", data-bar-color="#7266ba", data-height="20", data-bar-width="5", data-bar-spacing="2", data-values="1,4,4,10,5,9,2", data-resize="true")
                td
                  .label.label-success Complete
              tr
                td Nullam sit amet
                td 
                  div(data-sparkline="", data-bar-color="#23b7e5", data-height="20", data-bar-width="5", data-bar-spacing="2", data-values="1,4,4,7,5,9,4", data-resize="true")
                td
                  .label.label-warning Delayed
        // END table-responsive
      // END panel
  // END row

block vendor_js
  // SPARKLINE
  script(src='../vendor/sparkline/index.js')